<template>
  <!-- 模糊搜索 -->
  <div>
    <input type="text" @keydown.enter="searCh" v-model="xinxi" />
    <ul v-for="(i, item) in arr" :key="item">
      <li>{{ i.title }}</li>
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
      arr: [
        { title: "阿迪鞋子" },
        { title: "耐克鞋" },
        { title: "安踏鞋" },
        { title: "乔丹鞋子" },
        { title: "李宁鞋" },
        { title: "星期六圆头鞋" },
        { title: "COZYSTEPS单鞋" },
      ],
      xinxi: "",
    };
  },
  methods: {
    searCh() {
      if (this.xinxi.length > 0) {
        return (this.arr = this.arr.filter(
          (item) => item.title.indexOf(this.xinxi) != -1
        ));
      }
      // this.arr.forEach((item) => {
      //   if (item.title.indexOf(this.xinxi) != -1) {
      //     this.arrnew.push(this.arr[item]);
      //   }
      // });
    },
  },
  computed: {
    cha() {},
  },
};
</script>
<style>
ul,
li {
  list-style: none;
}
</style>
